import { useRouter } from "@tarojs/taro";
import classNames from "classnames";
import PinchZoom from "pinch-zoom-js";
import React, { useEffect, useState } from "react";
import { filterDocumentType } from "../../../../src/utils";
import { IVersion } from "../../../../src/interfaces";
import folderFile from "../../../assets/folder-file.png";
import { documentConfig } from "../documentConfig";
import { matchSuffixType } from "../../../../src/utils/check-file-type";
import "../index.scss";

interface Props {
  file?: IVersion;
}

export const PreviewComponent = ({ file }: Props) => {
  const router = useRouter();
  const { canPreview = "" } = router.params || {};
  const [error, setError] = useState(false);
  /**0 文档， 1图片，2视频  3 链接*/
  const [previewType, setPreviewType] = useState(0);
  useEffect(() => {
    if (!file || !file.type) return;
    const type = matchSuffixType(file.extensionName, file.type);
    if (canPreview === "false" || !type) {
      setError(true);
      return;
    }
    let docEditor;
    let piz;
    const previewDom = document.getElementById(
      "file-preview"
    ) as HTMLDivElement;
    if (!previewDom) return;
    const wrapper = previewDom.parentElement as HTMLDivElement;
    if (file.type === 600) {
      setPreviewType(3);
      setTimeout(() => {
        // wrapper.style.height = "90%";
        const iframe = wrapper.firstElementChild?.firstElementChild;
        if (!iframe) return;
        // iframe.height = wrapper.clientHeight - 20 + "px";
        // iframe.width = wrapper.clientWidth + "px";
      });
      return;
    }
    const imgList = ["png", "jpg", "jpeg", "bmp", "gif"];
    var videolist = ["mp4", "m2v", "mkv", "3gp", "rmvb", "flv", "mov"];
    if (imgList.includes(file.extensionName)) {
      setPreviewType(1);
      setTimeout(() => {
        const img = document.getElementById("file-preview");
        if (img) {
          new PinchZoom(img, {});
        }
      });
    } else if (videolist.includes(file.extensionName)) {
      setPreviewType(2);
    } else {
      setPreviewType(0);
      documentConfig.document.url = file.url;
      documentConfig.document.title = file.name + "." + file.extensionName;
      documentConfig.document.fileType = "pdf";
      documentConfig.document.key = file.id;
      documentConfig.documentType = filterDocumentType(
        `.${file.extensionName}`
      );
      documentConfig.height = wrapper.offsetHeight + "px";
      documentConfig.events.onError = () => {
        setError(true);
        docEditor.destroyEditor();
      };
      docEditor = new (window as any).DocsAPI.DocEditor(
        "file-preview",
        documentConfig
      );
    }
    return () => {
      docEditor && docEditor.destroyEditor();
      piz && piz.disable();
    };
  }, [file]);

  return (
    <>
      <div
        className={classNames("file-preview-wrapper", {
          "file-preview-wrapper--error": error,
        })}
      >
        {error && (
          <div className="file-preview-error">
            <span className="iconfont icon-a-CannotPreview"></span>
            该文件不支持预览
          </div>
        )}
        {!error && (
          <div
            id="file-preview"
            style={
              previewType === 3
                ? { width: "100%", height: "100%", display: "flex" }
                : {}
            }
          >
            {previewType === 1 && (
              <img
                src={file?.url}
                onError={() => {
                  setError(true);
                }}
              />
            )}
            {previewType === 2 && <video controls src={file?.url} />}
            {previewType === 3 && (
              <iframe
                style={{ flex: "1", border: "0" }}
                src={file?.urlLink}
              ></iframe>
            )}
          </div>
        )}
      </div>
    </>
  );
};
